<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		a{color: #333; text-decoration: none;}
		#nav{position: relative; margin:100px auto 0; width: 846px;}
		#nav ul{list-style: none;zoom:1;}
		#nav ul:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
		#nav li{float: left;border-right: 1px solid #ddd;}
		#nav li:last-child{border:none;}
		.a1{display: block; width:120px;height: 40px;line-height: 40px;text-align: center; background: #eee;}
		.subnav{display: none;position: absolute;top: 40px;background: #00BCD4;white-space: nowrap;}
		.subnav a{display: inline-block;margin:0 8px;line-height: 35px;font-size: 12px; color: #fff;}
		#nav li:hover .a1{color: #fff; background: #00BCD4;}
		#nav li:hover .subnav{display: block;}
	</style>
	<script>
		window.onload = function(){
			var get = {
				byId : function(id){
					return document.getElementById(id);
				},
				byTagName : function(_elem,_parent){
					return (_parent || document).getElementsByTagName(_elem);
				},
				byClass : function(_class,_parent){
					var _arr = [];
					var reClass = new RegExp("(^| )" + _class + "( |$)");
					var aElem = this.byTagName("*",_parent);
					for(var i = 0; i < aElem.length; i++){
						reClass.test(aElem[i].className) && _arr.push(aElem[i]);
					}
					return _arr;
				}
			}

			var oNav = get.byId("nav");
			var oLi = get.byTagName("li",oNav);
			var oSubNav = get.byClass("subnav",oNav);
			var aSubNav = null;

			for(var i = 0;i < oLi.length ; i++){
				oLi[i].onmouseover = function(){

					aSubNav = get.byClass("subnav",this)[0];

					if(!aSubNav) return;

					if(oNav.offsetWidth - this.offsetLeft > aSubNav.offsetWidth){
						aSubNav.style.left = this.offsetLeft + "px";
					}else{
						aSubNav.style.right = 0;
					}
				}
			}
		}
	</script>
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#" class="a1">首页</a></li>
			<li>
				<a href="#" class="a1">行业资讯</a>
				<div class="subnav">
					<a href="#">行业资讯</a>
					<a href="#">行业资讯</a>
					<a href="#">行业资讯</a>
					<a href="#">行业资讯</a>
					<a href="#">行业资讯</a>
				</div>
			</li>
			<li>
				<a href="#" class="a1">新闻动态</a>
				<div class="subnav">
					<a href="#">新闻动态</a>
					<a href="#">新闻动态</a>
					<a href="#">新闻动态</a>
					<a href="#">新闻动态</a>
					<a href="#">新闻动态</a>
				</div>
			</li>
			<li>
				<a href="#" class="a1">关于我们</a>
				<div class="subnav">
					<a href="#">关于我们</a>
					<a href="#">关于我们</a>
					<a href="#">关于我们</a>
					<a href="#">关于我们</a>
					<a href="#">关于我们</a>
				</div>
			</li>
			<li>
				<a href="#" class="a1">联系我们</a>
				<div class="subnav">
					<a href="#">联系我们</a>
					<a href="#">联系我们</a>
					<a href="#">联系我们</a>
					<a href="#">联系我们</a>
					<a href="#">联系我们</a>
				</div>
			</li>
			<li>
				<a href="#" class="a1">产品展示</a>
				<div class="subnav">
					<a href="#">产品展示</a>
					<a href="#">产品展示</a>
					<a href="#">产品展示</a>
					<a href="#">产品展示</a>
					<a href="#">产品展示</a>
				</div>
			</li>
			<li>
				<a href="#" class="a1">员工风采</a>
				<div class="subnav">
					<a href="#">员工风采</a>
					<a href="#">员工风采</a>
					<a href="#">员工风采</a>
					<a href="#">员工风采</a>
					<a href="#">员工风采</a>
					<a href="#">员工风采</a>
					<a href="#">员工风采</a>
				</div>
			</li>
		</ul>
	</div>
</body>
</html>